﻿@{
    ViewBag.Title = "Index";
}

<h2>商品基本资源录入</h2>

<form id="form1" action="#" method="post">
<table style="border: 0px">
    <tr>
        <td>商品分类：</td>
        <td>
            <select data-bind="options: CategoryList, optionsText: 'Value', optionsValue: 'ID', value: CategoryId"></select>
        </td>
    </tr>
    <tr>
        <td>商品名称：</td>
        <td>
            <input type="text" data-bind="value: ProductName" style="width: 300px" value="" />
        </td>
    </tr>
    <tr>
        <td>库存单位：</td>
        <td>
            <select name="Unit" style="width: 100px" data-bind="value: Unit">
                <option value="个">个</option>
                <option value="双">双</option>
                <option value="箱">箱</option>
                <option value="只">只</option>
            </select>
            &nbsp;&nbsp;&nbsp;
	单价：<input type="text" name="Price" style="width: 120px" value="123.45" data-bind="value: Price" />
        </td>
    </tr>
    <tr>
        <td>销售方式：</td>
        <td>
            <label>
                <input type="radio" name="SaleMode" value="0" checked="checked" data-bind="checked: SaleMode" />零售</label>
            <label>
                <input type="radio" name="SaleMode" value="1" data-bind="checked: SaleMode" />批发</label>
        </td>
    </tr>
    <tr>
        <td>可选颜色：</td>
        <td>
            <label>
                <input type="checkbox" name="Colors" value="Red" data-bind="checked: Colors" />红色</label>
            <label>
                <input type="checkbox" name="Colors" value="Green" data-bind="checked: Colors" />绿色</label>
            <label>
                <input type="checkbox" name="Colors" value="Blue" data-bind="checked: Colors" />蓝色</label>
            <label>
                <input type="checkbox" name="Colors" value="White" data-bind="checked: Colors" />白色</label>
            <label>
                <input type="checkbox" name="Colors" value="Black" data-bind="checked: Colors" />黑色</label>
        </td>
    </tr>
    <tr>
        <td>备注信息：</td>
        <td>
            <textarea name="Remark" cols="20" rows="50" style="width: 300px; height: 50px" data-bind="value: Remark"></textarea>
        </td>
    </tr>
</table>
<br />
<input type="button" name="button" value="提交" data-bind="click: SaveClick" />
<input type="button" name="button" value="批量加载数据" data-bind="click: LoadClick" />
</form>

<hr />
<p><b>返回的结果：</b></p>
<textarea id="output" cols="20" rows="50" style="width: 500px; height: 200px" data-bind="value: Result"></textarea>
<script type="text/javascript">
    function viewModel() {
        var self = this;
        self.CategoryId = ko.observable("2");
        self.CategoryList = ko.observableArray([{ "ID": 1, "Value": "手机" }, { "ID": 2, "Value": "计算机" }, { "ID": 3, "Value": "衣服" }, { "ID": 4, "Value": "生活用品" }]);

        self.ProductName = ko.observable("");
        self.Unit = ko.observable("只");

        self.Price = ko.observable();
        self.SaleMode = ko.observable("1");
        self.Colors = ko.observableArray(["Blue","Red"]);

        self.Remark = ko.observable("");

        self.Result = ko.observable();
        self.Init = function () {

        };
        self.LoadDetails = function () {
            //var catlist = [{ "ID": 1, "Value": "手机" }, { "ID": 2, "Value": "计算机" }, { "ID": 3, "Value": "衣服" }, { "ID": 4, "Value": "生活用品" }];
            //self.CategoryList(catlist);
        };
        self.SaveClick = function () {
            vm.Result("");
            //var obj = ko.toJSON(vm);
            var obj = JSON.parse(ko.toJSON(vm));
            obj.CategoryList = undefined;
            obj.Result = undefined;
            vm.Result(JSON.stringify(obj));
        };

        self.LoadClick = function () {
            var obj = { "CategoryId": 4, "ProductName": "手机", "Unit": "只", "Price": "23", "SaleMode": "1", "Colors": ["Blue", "Red"], "Remark": "备注信息" };
            ko.Load(self, obj);
        };




        //scripts
    }

    var vm = new viewModel();
    $(function () {
        ko.applyBindings(vm);
    });

</script>
